<template>
  <div class="page-box">
    <div class="main" :style ="loginbg">
      <div class="box">
        <ul>
          <li>
            <img src="/static/img/icon1.png" alt="" class="lco">
            <input v-model="username" type="text" name="mobile" id="mobile" placeholder="$t('RegisterPage.qsrsjh')">
          </li>
          <li>
            <img src="/static/img/icon2.png" alt="" class="lco">
            <input v-model="password" type="password" name="password" id="password" placeholder="$t('RegisterPage.qsrmm')">
          </li>
          <li>
            <img src="/static/img/icon4.png" alt="" class="lco">
            <input v-model="share_code" type="text" name="password" placeholder="$t('RegisterPage.qsryqm')">
          </li>
          <li>
            <img src="/static/img/icon5.png" alt="" class="lco">
            <input v-model="captcha_code" type="text" name="password"  placeholder="$t('RegisterPage.yzm')">
            <img :src="captcha_img" class='captchaimg' style=''  @click ="getCaptcha">
          </li>
          <li>
            <img src="/static/img/icon4.png"  alt="" class="lco">
            <input v-model="code" type="text" name="code" id="code" placeholder="$t('RegisterPage.sjyzm')">
            <button :disabled="username.length!=11 || timeout!=0" class="btn btnGetCode" id="btnGetCode" @click="handleClickSendCode">{{timeout>0?timeout:$t('RegisterPage.fs')}}</button>
          </li>
        </ul>
        <div><button class="btn" :disabled="loading || username=='' || password=='' || code == ''" @click="handleClickRegister">{{ $t('RegisterPage.zc') }}</button></div>
        <div><a href="/#/login"><button class="btn">{{ $t('RegisterPage.dl') }}</button></a></div>
      </div>
    </div>
<!--    <div style="color:#fff;font-size: 0.5rem;text-align: center;">{{ $t('RegisterPage.zc') }}</div>-->
<!--    <TopMsg :top_msg="top_msg" :top_msg_show="top_msg_show"/>-->
<!--    <div class="login-box">-->
<!--      <div class="form-line">-->
<!--        <nut-textinput-->
<!--          v-model="username"-->
<!--          label=""-->
<!--          maxLength="20"-->
<!--          placeholder="$t('RegisterPage.qsrsjh')"-->
<!--          :clearBtn="true"-->
<!--          :disabled="false"-->
<!--        />-->
<!--      </div>-->
<!--      <div class="form-line">-->
<!--        <nut-textinput-->
<!--          v-model="password"-->
<!--          label=""-->
<!--          type="password"-->
<!--          maxLength="20"-->
<!--          placeholder="$t('RegisterPage.qsrmm')"-->
<!--          :clearBtn="true"-->
<!--          :disabled="false"-->
<!--        />-->
<!--      </div>-->
<!--      <div class="form-line">-->
<!--        <nut-textinput-->
<!--          v-model="share_code"-->
<!--          label=""-->
<!--          maxLength="20"-->
<!--          placeholder="$t('RegisterPage.yqm')"-->
<!--          :clearBtn="true"-->
<!--          :disabled="false"-->
<!--        />-->
<!--      </div>-->
<!--      <div class="form-line send-code-box">-->
<!--        <nut-textinput-->
<!--          v-model="code"-->
<!--          label=""-->
<!--          maxLength="6"-->
<!--          placeholder="$t('RegisterPage.qsryzm')"-->
<!--          :clearBtn="false"-->
<!--          :disabled="false"-->
<!--        />-->
<!--        <nut-button-->
<!--          small-->
<!--          :disabled="username.length!=11  || timeout!=0"-->
<!--          class="send-code"-->
<!--          @click="handleClickSendCode"-->
<!--        >{{timeout>0?timeout:$t('RegisterPage.fs')}}</nut-button>-->
<!--      </div>-->
<!--      <div class="form-line">-->
<!--        <nut-button-->
<!--          block-->
<!--          @click="handleClickRegister"-->
<!--          :disabled="loading || username=='' || password=='' || code == ''"-->
<!--          style="border-radius: 0.3rem;background: #fff;color:#000;"-->
<!--        >-->
<!--          {{ $t('RegisterPage.zc') }}-->
<!--        </nut-button>-->
<!--      </div>-->
<!--      <div class="form-line">-->
<!--        <div class="pull-right">-->
<!--          <a href="/#/login" style="position: relative;bottom:0.4rem;">{{ $t('RegisterPage.dl') }}</a>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>

import TopMsg from "../components/TopMsg";


export default {
  name: 'RegisterPage',
    components: {TopMsg},
    data () {
    return {
        show:true,
        username:'',
        password:'',
        share_code:'',
        code:'',
        loading:false,
        top_msg_show:false,
        top_msg:'',
        timeout:0,
        timeout_limit:60,
        captcha_img:'',
        captcha_key:'',
        captcha_code:'',
        loginbg:{
          background:'',
        }
    }
  },
    methods:{
        timerInit(s){
            this.timeout = s;
            let timer = setInterval(()=>{
                if(this.timeout <= 0){
                    clearInterval(timer);
                    localStorage.removeItem("last_timer");
                    return;
                }
                this.timeout -=1;
                localStorage.setItem("last_timer",this.timeout);
            }, 1000);
        },
        handleClickRegister(){
            if(this.username!="" || this.password !=""){
                this.doRegister(this.username,this.password,this.code,()=>{

                });
            } else{
                this.top_msg_show = !this.top_msg_show;
                this.top_msg=this.$t('RegisterPage.qsrwzdxx');
                //this.$toast.fail(this.$t('RegisterPage.qsrwzdxx'));
            }
        },
        doRegister(username,password,code,callback){
            let loading = this.$toast.loading();
            this.$axios.post(this.$api_url.register,this.$qs.stringify({
                username:username,
                password:password,
                share_code: this.share_code,
                code:code,
            })).then((res)=>{
                if(res.data.code == 0){
                    this.$toast.success(res.data.msg);
                    this.$helper.setToken(res.data.data);
                    location.href="/#/";
                } else{
                    alert(res.data.msg);
                }
            }).catch((ex)=>{
                this.$toast.fail(ex.message);
            }).then(()=>{
                loading.hide();
                callback();
            })
        },
        handleClickSendCode(){

            let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
            if(!myreg.test(this.username)){
                this.$toast.fail(this.$t('RegisterPage.zhgscw'));
                return
            }
            if(this.captcha_code==""){
              this.$toast.fail(this.$t('RegisterPage.qsrtpyzm'));
              return
            }
            let loading = this.$toast.loading();
            this.$axios.post(this.$api_url.send_code,this.$qs.stringify({
                username:this.username,
                captcha:this.captcha_code,
                key:this.captcha_key
            })).then((res)=>{
                if(res.data.code == 0){
                    this.timerInit(this.timeout_limit);
                    this.$toast.success(res.data.msg);
                } else{
                    this.$toast.fail(res.data.msg);
                }
            }).catch((ex)=>{
                this.$toast.fail(ex.message);
            }).then(()=>{
                loading.hide();
            })
        },
        getCaptcha(){
          let loading = this.$toast.loading();
          this.$axios.post(this.$api_url.codeimg,"").then((res)=>{
              this.captcha_img = res.data.img;
              this.captcha_key = res.data.key;
            }).catch((err)=>{
              alert(err.message);
            }).then(()=>{
              loading.hide();
            });
        },
        setbg(){
          let bg = this.$qs.parse(localStorage.getItem('config_bg'));
          this.loginbg.background = 'url('+ bg.LoginBG +')';
          this.loginbg['background-size'] = '100% auto';
          this.loginbg['background-repeat'] = 'no-repeat';
        }
    },
    mounted(){
        this.getCaptcha()
        let time = localStorage.getItem("last_timer");
        if(time != null && time>=0){
            this.timerInit(time);
        }
        this.setbg();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../../static/css/app.css";
  .main {
    height: 10.666667rem;
    position: fixed;
    height: 100%;
    width: 100%;
    background: url(/static/img/login-bg.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    -moz-background-size: 100% auto;
    background-color: #355bea;
    padding-top: 5.6rem;
  }
  .box {
    margin: 0 .666667rem;
    position: relative;
    z-index: 999;
    border-radius: .266667rem;
    padding: .4rem;
    padding-top: .666667rem;
    background: rgba(29,47,147,.8);
  }
  .box ul li {
    overflow: hidden;
    position: relative;
    padding: .066667rem;
    margin: .066667rem;
    margin-bottom: .266667rem;
  }

  .box ul li .lco {
    width: .853333rem;
    position: absolute;
    left: .4rem;
    top: .24rem;
    border-right: .013333rem solid #ccc;
    padding-right: .266667rem;
  }

  .box ul li input {
    float: left;
    width: 100%;
    height: 1.066667rem;
    padding: 0 1.6rem;
    font-size: .4rem;
    outline-style: none;
    border: 0;
  }
  .btn {
    width: 100%;
    font-size: .4rem;
    line-height: .986667rem;
    color: #c73a4f;
    text-align: center;
    border-radius: .08rem;
    background-color: #fee0a3;
    margin-top: .133333rem;
    font-weight: 600;
    cursor: pointer;
    outline-style: none;
    border: 0;
  }
  .box ul li .btnGetCode {
    width: 1.6rem;
    position: absolute;
    right: .4rem;
    background: none;
    color: #2f3848;
    width: auto;
    margin: 0;
  }
  .c p {
    text-align: center;
    border-bottom: .013333rem solid #fff;
    color: #fff;
    font-weight: 300;
    font-size: .24rem;
    padding: .066667rem;
    display: inline-block;
    max-width: 100%;
    margin-bottom: .066667rem;
  }
  .box div p {
    line-height: .8rem;
    font-size: .373333rem;
    color: #fff;
    padding-top: .133333rem;
  }
  .captchaimg {
    position: absolute;
    top: 5px;
    right: 2px;
  }
  
  /*.page-box{*/
  /*  height: 100%;*/
  /*  background: url('/static/img/login-bg.jpg');*/
  /*  background-size: 100% 100%;*/
  /*  padding:0.2rem;*/
  /*}*/
  /*.login-box{*/
  /*  position: absolute;*/
  /*  bottom: 0;*/
  /*  left: 0;*/
  /*  width: 100%;*/
  /*  font-size:0.5rem;*/
  /*  background: rgba(0,0,0,0.3);*/
  /*}*/
  /*.send-code-box{*/
  /*  position: relative;*/
  /*}*/
  /*.send-code{*/
  /*  position: absolute;*/
  /*  right: 0.2rem;*/
  /*  top: 0.18rem;*/
  /*}*/
  /*.login-box a{*/
  /*  color:#fff;*/
  /*}*/
  /*.top-box{*/
  /*  font-size: 0.5rem;*/
  /*  color: #fff;*/
  /*  padding:0 0.5rem;*/
  /*  position: absolute;*/
  /*  bottom: 0.4rem;*/
  /*  width: 100%;*/
  /*}*/
  /*.top-box a{*/
  /*  color:#fff;*/
  /*}*/
</style>
